drawio.svgファイル内にインポートした画像が含まれるとGitLabで正しく描画されない件

GitLabでdrawioで作成した画像ファイルを扱うのであれば、拡張子をdrawio.pngにするのが無難かも

#Draw.io

#GitLab

#GitHub

のんピ

2022.08.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

何だか正しく描画されないな

こんにちは、のんピ(@non____97)です。

皆さんはdrawio.svgは好きですか? 私は好きです。

drawioの画像ファイルの拡張子をdrawio.svgにすることで、作成した画像をMarkdownファイルで表示するときにいちいちsvgやpngにエクスポートする必要がなくなります。

ただし、GitLabの場合drawioの画像ファイルの拡張子をdrawio.svgにすることで、正しく描画されないことがあることをご存知でしょうか。

今回は、そんな事象について紹介します。

いきなりまとめ

GitLabの場合、drawio.svgのファイル内にインポートした画像が含まれると正しく描画されない
GitHubではdrawio.svgのファイル内にインポートした画像が含まれていても正しく描画される
GitLabでdrawioで作成した画像ファイルを扱うのであれば、拡張子をdrawio.pngにするのが無難かも

画像ファイルの用意

それでは検証用の画像ファイルを用意します。

今回は以下の3つの画像ファイルを用意します。

drawio内で描画した図形のみのdrawio.svgファイル (drawio-shape-only.drawio.svg)
drawio内で描画した図形とインポートされた画像が含まれるdrawio.svgファイル (drawio-shape-and-imported-image.drawio.svg)
インポートされた画像のみのdrawio.svgファイル (imported-image.drawio.svg)

ちなみに画像のインポートはdrawioのエディター内のファイル-Import...から行えます。

画像のインポート

GitLabの場合

それでは、画像をGitLabにアップロードして正しく表示されるか確認してみましょう。

GitLabのリポジトリ上に画像ファイルをアップロードして、README.mdに表示させてみます。

使用するREADME.mdは以下の通りです。

# svg-file-display-test

## drawio-shape-only.drawio.svg

![drawio-shape-only.drawio.svg](./drawio-shape-only.drawio.svg)

## drawio-shape-and-imported-image.drawio.svg

![drawio-shape-and-imported-image.drawio.svg](./drawio-shape-and-imported-image.drawio.svg)

## imported-image.drawio.svg

![imported-image.drawio.svg](./imported-image.drawio.svg)

README.mdを表示すると以下のようになりました。

gitlab_README_md

drawio内で描画した図形とインポートされた画像が含まれるdrawio.svgファイル (drawio-shape-and-imported-image.drawio.svg)と、インポートされた画像のみのdrawio.svgファイル (imported-image.drawio.svg)が表示されませんね。

drawio.svgファイルの実体はテキストです。そのため、悪意あるコードを埋め込むこともできます。もしかしたらGitHub側でセキュリティ対策としてimageやscriptタグなどを含む場合は描画しないようにしているのかもしれませんね。